/**
 * Created by qinrui on 2017/11/10
 * 人事简报
 */

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { WhiteSpace } from "@ali/ding-ui";
import './index.less';

// modules
import CardHeader from '../../../components/CardHeader';
import ContrastChart from '../../../components/contrastChart';
import DataAnalysis from './dataAnalysis';
import HelpModal from "../../../components/HelpModal/index";


// actions
import { fetchWeeklyReportQuery, fetchGetOnJobNum, fetchGetOnJobDataAnalysis } from '../../../actions/weekly';

// utils
import { get } from "../../../utils/db";

import { setTitle, openLink } from "../../../utils/dingtalk.js";

// 将store注入组件的props
const mapStateToProps = state => ({});
// 将action与dispatch进行绑定并注入组件的props
const mapDispatchToProps = dispatch => ({
    //区分绑定到props的action与传递的props
    actions: bindActionCreators(
        {
            dispatch,
            fetchWeeklyReportQuery,
            fetchGetOnJobNum,
            fetchGetOnJobDataAnalysis,
            isLoading: true
        },
        dispatch
    )
});

@connect(mapStateToProps, mapDispatchToProps)
export default class MainpowerReport extends Component {
    constructor (props) {
        super(props);
        this.state = {
            totalEmpNum: 0,
            contrastChartWeekData: {type: "周"},
            contrastChartMonthData: {type: "月"}
        }
        setTitle({ title: "人事报表" });
    }

    componentWillMount (){
        // 获取在职总人数 
        this.props.actions.fetchGetOnJobNum()
            .then((res)=>{
                const {success, result} = res;

                if(success){
                    this.setState({
                        totalEmpNum: result.totalEmpNum
                    });
                }
            })

        // 在职员工分析
        this.getOnJobDataAnalysis();

        // 请求离线周(月)报数据汇总
        this.getWeeklyReportQuery();
    }

    /**
     * 在职员工分析
     */
    getOnJobDataAnalysis = () => {
        let dataAnalysis = [];
        this.props.actions.fetchGetOnJobDataAnalysis()
            .then((res) => {
                if(res.success){
                    const {totalEmpNum, corpAgeData, empAgeData, empEduData, empTypeData, genderData, marriedData } = res.result;
                    dataAnalysis.push(
                        {
                            name: "员工构成",
                            type: "empTypeData",
                            data: empTypeData
                        },
                        {
                            name: "司龄分布",
                            type: "corpAgeData",
                            data: corpAgeData
                        },
                        {
                            name: "学历分布",
                            type: "empEduData",
                            data: empEduData
                        },
                        {
                            name: "年龄分布",
                            type: "empAgeData",
                            data: empAgeData
                        },
                        {
                            name: "性别比例",
                            type: "genderData",
                            data: genderData
                        },
                        {
                            name: "已婚比例",
                            type: "marriedData",
                            data: marriedData
                        }
                    );
                    this.setState({
                        totalEmpNumAnalysis: totalEmpNum,
                        dataAnalysis,
                        isLoading: false
                    })
                }
            });

        
    }
    
    /**
     * 请求离线周(月)报数据汇总
     */
    getWeeklyReportQuery = () => {
        const { contrastChartWeekData, contrastChartMonthData } = this.state;
        this.props.actions.fetchWeeklyReportQuery({corpId: get('corpId')})
            .then((res)=>{
                const {success, result} = res;
                if(success){
                    this.setState({
                        contrastChartWeekData: Object.assign(contrastChartWeekData, result.week),
                        contrastChartMonthData: Object.assign(contrastChartMonthData, result.month),
                        isLoading: false
                    })
                } else {
                    console.log('数据请求失败！')
                }
            })
    }
    
    render(){
        const { isLoading, totalEmpNum, dataAnalysis=[], contrastChartWeekData, contrastChartMonthData } = this.state;
        return (
            <div className="manpower-Report scroll-body">
                {
                    !isLoading && 
                    <div className="manpower-Report-card manpower-Report-card-allChart">
                        <CardHeader 
                            title="在职员工分析"
                            />
                        <div className="card-body">
                            <div className="total-emp"
                                onClick = {()=>{
                                    window._rlog(`_empanalyze_totalempnum`);
                                    openLink("#/empAnalyzeDetail");
                                }}
                                >
                                <div className="total-emp-num">{ totalEmpNum }</div>
                                <div className="total-emp-lable">在职人数</div>
                            </div>
                            
                            <DataAnalysis totalEmpNum={this.state.totalEmpNumAnalysis} data={dataAnalysis}/>
                            
                        </div>
                    </div>
                }
                <WhiteSpace size="lg" />
                <div className="manpower-Report-card"
                    onClick={() => {
                        window._rlog(`_report_personnelweekly_week`);
                        openLink(`#/personnelWeekly?time=${contrastChartWeekData.timeValue}&periodType=week`);
                }}>
                    <CardHeader 
                        link={'更多'}
                        arrow={'true'}
                        title="周报&nbsp;" 
                        subtext={contrastChartWeekData.showTime ? contrastChartWeekData.showTime : ""}
                        />
                    <ContrastChart data={contrastChartWeekData}/>
                </div>

                <WhiteSpace size="lg" />

                <div className="manpower-Report-card"
                    onClick={() => {
                        window._rlog(`_report_personnelweekly_month`);
                        openLink(`#/personnelWeekly?time=${contrastChartMonthData.timeValue}&periodType=month`);
                }}>
                    <CardHeader 
                        link={'更多'}
                        arrow={'true'}
                        title="月报&nbsp;"
                        subtext={contrastChartMonthData.showTime ? contrastChartMonthData.showTime : ""}
                        />
                    <ContrastChart data={contrastChartMonthData} />
                </div>
                <HelpModal/>
            </div>
        )
    }
}